<template>
  <!-- Alt + Enter -->
  <input @keyup.alt.enter="clear" />
  <!-- Ctrl + 点击 -->
  <div @click.ctrl="doSomething">Do something</div>
  <h2>exact修饰符：允许控制触发一个事件所需的确定组合的系统按键修饰符</h2>
  <!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
  <button @click.ctrl="onClick">当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发</button>

  <!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
  <button @click.ctrl.exact="onClick">仅当按下 Ctrl 且未按任何其他键时才会触发</button>

  <!-- 仅当没有按下任何系统按键时触发 -->
  <button @click.exact="onClick">仅当没有按下任何系统按键时触发</button>
  <h2>鼠标按钮修饰符：left middle right</h2>
  <button @click.right.prevent="onClick">右键触发</button>
</template>
<script setup lang="ts">
const clear = () => {
  console.log('执行clear')
}
const doSomething = () => {
  console.log('执行doSomething')
}

const onClick = () => {
  console.log('点击成功')
  alert('执行')
}
</script>
